<script>
//确定订单
import { statcUrl } from "../api/api";
import { mapGetters, mapActions } from "vuex";
import { createOrder, payOrder, updateProfile } from "../api/otherServer";
import usermessage from "../store/usermessage";
import { isArray } from "_@vue_shared@3.2.40@@vue/shared";
export default {
  props: ["hideCom", "totallPrice", "selectPro", "showaddress", "checked"],
  data() {
    //将路径暴露出来
    return { statcUrl, showPop: false };
  },
  computed: {
    //获取地址的信息
    ...mapGetters("usermessage", ["address", "shoppData", "getProfile"]),
    defaultAddress() {
      for (let i = 0; i < this.address.length; i++) {
        if (this.address[i].isDefault) {
          return this.address[i];
        }
      }
    },
    // selectshoppData() {
    //   return this.shoppData.filter((item) => {
    //     return this.checked.includes(
    //       item.id + "-" + item.size + "-" + item.color
    //     );
    //   });
    // },
    getId() {
      let data = this.selectPro.map((item) => item.id);
      return data.join(",");
    },
  },
  methods: {
    ...mapActions("usermessage", ["setprofileActions"]),
    onOrderpay() {
      //在支付前先创建订单再支付
      createOrder(
        {
          allprice: this.totallPrice / 100,
          prolist: JSON.stringify(this.selectPro),
          status: 0,
          address: JSON.stringify(this.defaultAddress.address),
          idlist: this.getId,
        },
        (res) => {
          let Orderid = res.data[1].id;
          payOrder(
            {
              orderid: Orderid,
              money: this.totallPrice / 100,
            },
            (res) => {
              console.log(this.checked);

              for (let i = 0; i < this.shoppData.length; i++) {
                if (
                  this.checked.includes(
                    this.shoppData[i].id +
                      "-" +
                      this.shoppData[i].size +
                      "-" +
                      this.shoppData[i].color
                  )
                ) {
                  this.shoppData.splice(i, 1);
                  i--;
                }
              }
              //更新后端的个人信息
              updateProfile(
                {
                  filedname: "shoppingcart",
                  filedvalue: JSON.stringify(this.shoppData),
                },
                () => {
                  //更新到store状态
                  this.setprofileActions({
                    data: {
                      ...this.getProfile,
                      shoppingcart: JSON.stringify(this.shoppData),
                    },
                  });
                }
              );

              this.setprofileActions({
                data: {
                  ...this.getProfile,
                  shoppingcart: JSON.stringify(this.shoppData),
                  mymoney: this.getProfile.mymoney - this.totallPrice / 100,
                },
              });
              this.showPop = true;
            }
          );
        }
      );
    },
  },
};
</script>
<template>
  <div>
    <van-nav-bar
      title="订单"
      left-text="返回"
      left-arrow
      @click-left="hideCom('car')"
    />
    <div v-for="item in selectPro" :key="item.id" class="v-cardContainer">
      <van-card
        :num="item.num"
        :price="item.price"
        :title="item.title"
        :thumb="statcUrl + '/' + item.img"
      />
    </div>
    <ul class="address_container">
      <li>姓名 {{ defaultAddress.name }}</li>
      <li>电话 {{ defaultAddress.tel }}</li>
      <li>地址 {{ defaultAddress.address }}</li>
    </ul>

    <van-submit-bar
      :price="totallPrice"
      button-text="确认付款"
      @submit="onOrderpay"
    />
    <van-popup v-model:show="showPop" class="container-show">
      <span><van-icon name="passed" size="100" color="green" /></span>
      <van-button type="primary" @click="this.$router.push('/')"
        >返回首页</van-button
      >
      <van-button type="primary" @click="this.$router.push('/order')"
        >订单中心</van-button
      >
    </van-popup>
  </div>
</template>
<style lang="scss">
.container-show {
  span {
    text-align: center;
    margin-bottom: 0.2rem;
  }
  display: flex;
  flex-direction: column;
  padding: 0 0.2rem;
  width: 80%;
  .van-button {
    margin-bottom: 0.2rem;
    padding: 0.2rem 0;
  }
}
.address_container {
  width: 100%;
  height: 1rem;
  display: flex;
  flex-direction: column;
  background: #fff;
  font-size: 0.2rem;
  li {
    background-color: #fff;
    flex: 1;
    padding: 0.2rem 0.2rem;
    border-bottom: 1px solid #e0e0ee;
  }
}
.van-nav-bar {
  margin-bottom: 0.2rem;
}
.v-cardContainer {
  margin-bottom: 0.2rem;
  background-color: #fff;
  .van-card {
    background-color: #fff !important;
  }
}
</style>
